<template>
    <div ref="drawerRef" style="height: 100%;">
        <div class="fx fx-c_center pad-16 header">
            <div class="fx fx-center wh-80 logo">
                <jb-icon :local="true" icon="gravity-ui:display-pulse" width="50" color="#22c55e"></jb-icon>
            </div>
            <div class="ml-30 tc-dark">
                <div class="font-20">意图识别</div>
                <p class="font-14 tc-assist">由AI 根据用户提问,识别用户意图</p>
            </div>
        </div>
        <div class="content">
            <n-form-item>
                <template #default>
                    <div class="w-full">
                        <label class="flex flex-row mb-0.5">
                            Key&nbsp;<span class="text-red-600"> *</span>
                        </label>
                        <n-input @input="validateInput" style="width: 100%" v-model:value="item.key" placeholder="请输入Key,如:normal" class="custom-input">
                        </n-input>
                    </div>
                </template>

            </n-form-item>
            <n-form-item>
                <template #default>
                    <div class="w-full">
                        <label class="flex flex-row mb-0.5">
                            描述&nbsp;<span class="text-red-600"> *</span>
                        </label>
                        <n-input type="textarea" v-model:value="item.description"
                                 placeholder="请对该意图进行简单说明，比如售前咨询：用户对某些商品感兴趣、报销问题：员工对报销流程有问题等等"
                                 class="custom-input">

                        </n-input>
                    </div>
                </template>
            </n-form-item>
            <div style="overflow-y: auto;height: 800px;">
                <!-- cases -->
                <label>案例&nbsp<span class="text-red-600">*</span></label>
                <div v-for="(caseItem, caseIndex) in item.cases" :key="caseIndex" class="case-item">
                    <n-input style="width: 80%;" v-model:value="item.cases[caseIndex]" @keydown.enter="addCase"
                             placeholder="请输入用户可能提问的问题示例"
                             class="custom-input"/>&nbsp;&nbsp;&nbsp;&nbsp;
                    <div style="display: flex;width: 20%">
                        <n-button strong secondary circle type="error" @click="removeCase(caseIndex)" size="tiny">
                            <template #icon>
                                <jb-icon :local="true" icon="ri:subtract-fill"></jb-icon>
                            </template>
                        </n-button>
                        &nbsp;&nbsp;&nbsp;
                        <n-button strong secondary v-if="caseIndex === 0" circle type="success" size="tiny"
                                  @click="addCase">
                            <template #icon>
                                <jb-icon :local="true" icon="ri:add-large-fill"></jb-icon>
                            </template>
                        </n-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import {
    ref,
} from 'vue';
import {
    NInput
} from 'naive-ui';
import {nextId} from "@/utils/common/snowflakeIdGenerator.js";

const props = defineProps({
    intention: {
        type: Object,
        required: true
    },
    index: {
        type: Number,
        required: true
    },
});
// 正则表达式验证
const validateInput = (value) => {
    // 只允许英文和数字
    const regex = /^[a-zA-Z0-9]*$/;
    if (!regex.test(value)) {
        // 如果输入不符合规则，清空输入
        item.value.key = '';
    }
};
const item = ref(JSON.parse(JSON.stringify(props.intention)));
if (!item.value.id) { //生成一个id
    item.value.id = nextId();
}
console.debug('开始编辑意图', item.value)

const updateCase = (caseIndex) => (newValue) => {
    console.debug('updateCase', caseIndex, newValue)
    item.value.cases[caseIndex] = newValue;
};

const removeCase = (caseIndex) => {
    if (item.value.cases.length > 1) {
        item.value.cases.splice(caseIndex, 1);
    }
};

const addCase = () => {
    item.value.cases.unshift('');
};


const submit = async (callback) => {
    if (callback) {
        callback(item, props.index)
    }
}

defineExpose({
    submit
})
</script>

<style scoped>
.case-item {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    margin-top: 8px;
}


.content {
    margin-top: 20px;
}


/* 新增的自定义输入框样式 */
.custom-input {
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
    /* 添加阴影效果 */
    border: none !important;
    /* 移除默认边框 */
    transition: box-shadow 0.3s ease;
    /* 添加过渡效果使阴影变化更平滑 */
    border-radius: 10px;

}

.custom-input :deep(n-input-wrapper) {
    border: none !important;
}

.custom-input:focus {
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.2);
    /* 当输入框聚焦时加深阴影 */
}

.case-item {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    margin-top: 8px;
}


.content {
    margin-top: 20px;
}

.n-input-group {
    margin-top: 20px;
}

.custom-input-group {
    display: flex;
    align-items: stretch;
    /* 确保所有子元素的高度一致 */
}

.custom-input-group-label {
    width: 10%;
    text-align: center;
    display: flex;
    justify-content: center;
    /* 垂直居中 */
    align-items: center;
    /* 水平居中 */
}


</style>